<script setup>
import { onMounted } from 'vue'
import * as echarts from 'echarts'
import { setupChartAnimation } from '@/utils/animation'

onMounted(() => {
  // 基于准备好的dom，初始化echarts实例
  const myChart = echarts.init(document.querySelector('.venueechartsr'))
  const data = [{
    'name': 1802,
    'value': 15
  }, {
    'name': 1803,
    'value': 25
  }, {
    'name': 1804,
    'value': 22
  }, {
    'name': 1805,
    'value': 17
  }]
  const xData = [],
    yData = []
  const min = 0
  data.map(function (a) {
    xData.push(a.name)
    if (a.value === 0) {
      yData.push(a.value + min)
    } else {
      yData.push(a.value)
    }
  })
  myChart.setOption({
    color: ['#3398DB'],
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'line',
        lineStyle: {
          opacity: 0
        }
      },
      formatter: function (prams) {
        if (prams[0].data === min) {
          return '0%'
        } else {
          return prams[0].data + '%'
        }
      }
    },
    legend: {
      data: ['直接访问', '背景'],
      show: false
    },
    grid: {
      left: '0%',
      right: '0%',
      bottom: '5%',
      top: '7%',
      height: '85%',
      containLabel: true,
      z: 22
    },
    xAxis: [{
      type: 'category',
      gridIndex: 0,
      data: xData,
      axisTick: {
        show: false
      },
      axisLine: {
        show: false
      },
      axisLabel: {
        show: true,
        color: '#7b8d9c',
        fontSize: 9
      }
    }],
    yAxis: [{
      type: 'value',
      gridIndex: 0,
      splitLine: {
        show: false
      },
      axisTick: {
        show: false
      },
      min: min,
      max: 30,
      axisLabel: {
        color: '#7b8d9c',
        formatter: '{value} k'
      }
    },
    {
      type: 'value',
      gridIndex: 0,
      min: min,
      max: 30,
      splitNumber: 4,
      splitLine: {
        show: true,        // 是否显示分隔线
        lineStyle: {       // 分隔线样式
          color: '#182a37',   // 颜色
          type: 'dashed',  // 类型
          width: 1         // 宽度
        }
      },
      axisLine: {
        show: false
      },
      axisTick: {
        show: false
      },
      axisLabel: {
        show: false
      },
      splitArea: {
        show: false
      }
    }
    ],
    series: [{
      name: '合格率',
      type: 'bar',
      barWidth: '25%',
      xAxisIndex: 0,
      yAxisIndex: 0,
      itemStyle: {
        normal: {
          barBorderRadius: 30,
          color: new echarts.graphic.LinearGradient(
            0, 0, 0, 1, [{
              offset: 0,
              color: '#1cebbb'
            },
            {
              offset: 0.5,
              color: '#1cebbb'
            },
            {
              offset: 1,
              color: '#228296'
            }
          ]
          )
        }
      },
      data: yData,
      zlevel: 11

    },
    {
      name: '背景',
      type: 'bar',
      barWidth: '25%',
      xAxisIndex: 0,
      yAxisIndex: 0,
      barGap: '-100%',
      data: [30, 30, 30, 30, 30, 30, 30],
      itemStyle: {
        normal: {
          barBorderRadius: 30,
          color: '#1e3143'
        }
      },
      zlevel: 9
    }

    ]
  })
  window.addEventListener('resize', () => {
    myChart.resize()
  })
  setupChartAnimation(myChart)
})
</script>

<template>
  <div></div>
</template>

<style scoped></style>